<template>
	<view class="scrollFull login">
		<view class="section section1">
			<image src="/static/images/logo.png" class="logoImg"></image>
			<view class="h1-name">射阳县健康小屋云监控平台</view>

			<view class="loginForm">
				<view class="loginFormItem">
					<u--input
						placeholder="请输入手机号"
						border="surround"
						type="number"
						clearable
					></u--input>
				</view>
				<view class="loginFormItem">
					<u--input
						placeholder="请输入手机验证码"
						border="surround"
						type="number"
						clearable
					></u--input>
					<view class="codeBtn flexC" @tap="getCode">{{ tips }}</view>
					<u-code
						ref="uCode"
						:seconds="seconds"
						@change="codeChange"
						keep-running
						start-text="获取验证码"
					></u-code>
				</view>
			</view>
		</view>

		<view class="section section2">
			<view class="flexC submit">登录</view>
			<view class="line-txt">
				温馨提示：未授权用户，请联系管理员:
				<text class="a">18705105818</text>
			</view>
		</view>

		<view class="copyright">技术支持：江苏墨斗科技有限公司</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tips: '',
			seconds: 60
		};
	},
	methods: {
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});

				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.scrollFull {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 150rpx 0 86rpx;
}
.login {
	.logoImg {
		display: block;
		margin: 0 auto 22rpx;
		width: 135rpx;
		height: 195rpx;
		margin-bottom: 22rpx;
	}
	.h1-name {
		text-align: center;
		line-height: 1;
		font-size: 46rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3e4183;
		margin-bottom: 42rpx;
	}

	.copyright {
		text-align: center;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.loginForm {
		.loginFormItem {
			display: flex;
			align-items: center;
			width: 670rpx;
			margin-bottom: 24rpx;
			/deep/ .u-input {
				flex: 1;
				height: 88rpx;
				background: #f5f5f5;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 0 32rpx !important;
			}
			.codeBtn {
				margin-left: 12rpx;
				width: 198rpx;
				height: 88rpx;
				background: rgba(153, 153, 153, 0.46);
				border-radius: 10rpx;

				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #398bfd;
			}
		}
	}

	.section2 {
		.submit {
			margin: 0 auto 28rpx;
			width: 670rpx;
			height: 80rpx;
			background: linear-gradient(0deg, #256bfd 0%, #60c6fd 81%);
			border-radius: 40rpx;

			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
		.line-txt {
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			.a {
				color: #398bfd;
			}
		}
	}
}
</style>
